<!-- <template>
  <div class="container" v-if="article">
    <h3>{{ article.title }}</h3>
    <div class="author">
      <p>{{ article.author }}</p>
      <p>{{ article.location }}</p>
      <p>{{ article.created_at.substring(0, 10) }}</p>
    </div>
    <div class="content" v-html="article.content"></div>
  </div>
</template>

<script setup>
import hljs from 'highlight.js'
import 'highlight.js/styles/atom-one-dark.css' //引入highlight.js样式文件
import { useRoute } from 'vue-router'
import { useUserStore } from '@/stores/user'
import { onMounted, ref } from 'vue'

const route = useRoute()
const UserStore = useUserStore().user
const Info = ref(null)
const article = ref(null)

//highlight.js代码高亮
const codeBlock = ref('pre code')
const codeBlock2 = ref(null)
onMounted(() => {
  hljs.highlightBlock(codeBlock.value)
  hljs.highlightBlock(codeBlock2.value)
})

onMounted(() => {
  Info.value = UserStore
  const id = route.params.id
  console.log(id)
  console.log(Info.value)
  article.value = Info.value.find((item) => item.id == id)
  console.log(article.value)
})
</script>

<style>
.container {
  padding: 1.3rem;
  margin-bottom: 50px;
}
h3 {
  padding: 0;
  margin: 0;
}
.author {
  display: flex;
  justify-content: space-around;
  align-items: center;
  color: #999;
}
.content p {
  white-space: pre-wrap; /* 保留空格和换行 */
  word-wrap: break-word; /* 长单词换行 */
}
</style> -->

<template>
  <div class="container" v-if="article">
    <div class="contain">
      <h3>{{ article.title }}</h3>
      <div class="author">
        <p>{{ article.author }}</p>
        <p>{{ article.location }}</p>
        <p>{{ article.created_at.substring(0, 10) }}</p>
      </div>
    </div>

    <div class="content" v-html="article.content"></div>
  </div>
</template>

<script setup>
import hljs from 'highlight.js'
import 'highlight.js/styles/atom-one-dark.css' // 引入highlight.js样式文件
import { useRoute } from 'vue-router'
import { useUserStore } from '@/stores/user'
import { onMounted, ref, watch, nextTick } from 'vue'

const route = useRoute()
const UserStore = useUserStore().user
const Info = ref(null)
const article = ref(null)

// 监听 article 的变化并高亮显示代码块
watch(article, (newArticle) => {
  if (newArticle) {
    nextTick(() => {
      document.querySelectorAll('pre code').forEach((block) => {
        hljs.highlightElement(block)
      })
    })
  }
})

onMounted(() => {
  Info.value = UserStore
  const id = route.params.id
  console.log(id)
  console.log(Info.value)
  article.value = Info.value.find((item) => item.id == id)
  console.log(article.value)
})
</script>

<style scoped>
.container {
  margin-bottom: 50px;
}
.contain {
  padding: 1.3rem;
}
h3 {
  padding: 0;
  margin: 0;
}
.author {
  display: flex;
  justify-content: space-around;
  align-items: center;
  color: #999;
}
.content p {
  width: 100%;
  white-space: pre-wrap; /* 保留空格和换行 */
  word-wrap: break-word; /* 长单词换行 */
}

table {
  width: 100% !important;
  border-collapse: collapse;
}

table td {
  border: 3px solid skyblue !important;
}
</style>
